/**
 * 主页路由 - Expo Router
 * 学习主页面，显示用户进度、课程列表和统计信息
 * 使用 Expo Router 的文件路由系统
 * 
 * 作者：AI语言学习应用开发团队
 * 创建时间：2024年
 * 更新时间：2024年
 */
import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  RefreshControl,
  Dimensions,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useRouter } from 'expo-router';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 导入自定义组件
import { AppHeader } from '../components/Headers';
import { UserProgressCard, LessonCard, StatisticsGrid, BottomTip } from '../components/ScreenComponents';

// 导入课程数据和工具函数
import { lessonData } from '../data/lessonData';
import { CommonUI } from '../components/CommonUI';

const { width: screenWidth } = Dimensions.get('window');

/**
 * 主页组件 - 学习主页面
 * 功能包括：显示用户进度、课程列表、统计信息、连击天数等
 * 使用组件化架构，提高代码复用性和维护性
 */
export default function HomeScreen() {
  // 路由导航钩子
  const router = useRouter();
  
  // 状态管理
  const [userProgress, setUserProgress] = useState({
    currentStreak: 0,     // 连击天数
    totalXP: 0,          // 总经验值
    lessonsCompleted: 0,  // 已完成课程数
    completedLessons: [], // 已完成课程列表
    achievements: [],     // 成就列表
    lastStudyDate: null,  // 最后学习日期
  });
  
  const [refreshing, setRefreshing] = useState(false); // 下拉刷新状态
  const [isLoading, setIsLoading] = useState(true);    // 加载状态

  /**
   * 从本地存储加载用户进度数据
   * 包括经验值、连击天数、已完成课程等信息
   */
  const loadUserProgress = async () => {
    try {
      // 从 AsyncStorage 获取各项数据
      const [xpData, streakData, completedData, achievementsData, lastDateData] = await Promise.all([
        AsyncStorage.getItem('totalXP'),
        AsyncStorage.getItem('currentStreak'),
        AsyncStorage.getItem('completedLessons'),
        AsyncStorage.getItem('achievements'),
        AsyncStorage.getItem('lastStudyDate'),
      ]);

      // 解析并设置用户进度数据
      const totalXP = xpData ? parseInt(xpData) : 0;
      const currentStreak = streakData ? parseInt(streakData) : 0;
      const completedLessons = completedData ? JSON.parse(completedData) : [];
      const achievements = achievementsData ? JSON.parse(achievementsData) : [];
      const lastStudyDate = lastDateData || null;

      // 更新状态
      setUserProgress({
        totalXP,
        currentStreak,
        lessonsCompleted: completedLessons.length,
        completedLessons,
        achievements,
        lastStudyDate,
      });
    } catch (error) {
      console.error('加载用户进度失败:', error);
      // 显示错误提示
      Alert.alert('错误', '加载用户数据失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  /**
   * 下拉刷新处理函数
   * 重新加载用户进度数据
   */
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await loadUserProgress();
    setRefreshing(false);
  }, []);

  /**
   * 开始课程学习
   * 导航到课程详情页面
   * @param {Object} lesson - 课程对象
   */
  const startLesson = (lesson) => {
    if (!lesson || !lesson.id) {
      Alert.alert('错误', '课程信息不完整');
      return;
    }
    
    // 使用 Expo Router 导航到课程页面
    router.push({
      pathname: '/lesson',
      params: { 
        lessonId: lesson.id,
        title: lesson.title 
      }
    });
  };

  /**
   * 头部左侧按钮点击处理 - 导航到个人资料页面
   */
  const handleHeaderLeftPress = () => {
    router.push('/profile');
  };

  // 页面焦点时加载数据
  useFocusEffect(
    useCallback(() => {
      loadUserProgress();
    }, [])
  );

  // 页面初始化时加载数据
  useEffect(() => {
    loadUserProgress();
  }, []);

  // 加载状态显示
  if (isLoading) {
    return (
      <View style={styles.container}>
        <AppHeader 
          title="英语学习"
          userStats={{
            currentStreak: 0,
            totalXP: 0
          }}
          showStats={true}
        />
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>加载中...</Text>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {/* 自定义头部组件 */}
      <AppHeader 
        title="英语学习"
        userStats={{
          currentStreak: userProgress.currentStreak,
          totalXP: userProgress.totalXP
        }}
        onLeftPress={handleHeaderLeftPress}
        showStats={true}
      />

      {/* 滚动内容区域 */}
      <ScrollView 
        style={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={['#58CC02']} // Android 刷新指示器颜色
            tintColor="#58CC02"  // iOS 刷新指示器颜色
          />
        }
        showsVerticalScrollIndicator={false}
      >
        {/* 用户进度卡片 */}
        <UserProgressCard 
          userProgress={userProgress}
          username="学习者"
          style={styles.progressCard}
        />

        {/* 统计信息网格 */}
        <StatisticsGrid 
          userProgress={userProgress}
          style={styles.statsGrid}
        />

        {/* 课程列表标题 */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>选择课程</Text>
          <Text style={styles.sectionSubtitle}>开始你的学习之旅</Text>
        </View>

        {/* 课程列表 */}
        <View style={styles.lessonList}>
          {lessonData.map((lesson, index) => (
            <LessonCard
              key={lesson.id}
              lesson={lesson}
              isCompleted={userProgress.completedLessons.includes(lesson.id)}
              onPress={() => startLesson(lesson)}
              style={[
                styles.lessonCard,
                index === lessonData.length - 1 && styles.lastLessonCard
              ]}
            />
          ))}
        </View>

        {/* 底部提示信息 */}
        <BottomTip 
          icon="lightbulb-outline"
          text="每天坚持学习，保持学习连击！"
          style={styles.bottomTip}
        />
      </ScrollView>
    </View>
  );
}

/**
 * 样式定义
 * 采用多邻国风格的绿色主题和现代化设计
 */
const styles = StyleSheet.create({
  // 主容器样式
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa', // 浅灰背景
  },
  
  // 滚动视图样式
  scrollView: {
    flex: 1,
  },

  // 加载容器样式
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f8f9fa',
  },

  // 加载文本样式
  loadingText: {
    fontSize: 16,
    color: '#666',
    fontFamily: 'System',
  },

  // 用户进度卡片样式
  progressCard: {
    marginHorizontal: 16,
    marginTop: 16,
    marginBottom: 12,
  },

  // 统计网格样式
  statsGrid: {
    marginHorizontal: 16,
    marginBottom: 16,
  },

  // 区域标题容器
  sectionHeader: {
    marginHorizontal: 16,
    marginVertical: 12,
  },

  // 区域主标题
  sectionTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
    fontFamily: 'System',
  },

  // 区域副标题
  sectionSubtitle: {
    fontSize: 16,
    color: '#666',
    fontFamily: 'System',
  },

  // 课程列表容器
  lessonList: {
    paddingHorizontal: 16,
  },

  // 课程卡片样式
  lessonCard: {
    marginBottom: 12,
  },

  // 最后一个课程卡片样式
  lastLessonCard: {
    marginBottom: 20,
  },

  // 底部提示样式
  bottomTip: {
    marginHorizontal: 16,
    marginVertical: 20,
  },
});